import React, { useCallback } from "react";
import { Button, DatePicker, Pagination } from "antd";
import less from "less";

const colors = ["#a12356", "#0215a6", "#f120a1"];

const ThemeSetter = () => {
  const onColorChange = useCallback((color) => {
    less.modifyVars({
      "@primary-color": color,
      "@theme-color": color,
    });
  }, []);

  return (
    <>
      <h1>color setter</h1>
      {colors.map((c) => (
        <button key={c} onClick={() => onColorChange(c)}>
          {c}
        </button>
      ))}

      <hr />
      <Button>A</Button>
      <Button type="primary">A</Button>
      <DatePicker />
      <Pagination total={100} />
    </>
  );
};

export default ThemeSetter;
